<template>
	<view class="container">
	<view class="list">
		<view class="item" v-for="item in data.list" :key="item.index" @click="egoURl('/pages/commodity/bargaining/myGroupBuyinglist/createorderGroupCY?item='+JSON.stringify(item))">
			<view class="image">
				<image :src="item.goods.img" mode="aspectFill"></image>
				<view class="tlimg" v-if="item.state==2||item.take==1">
					砍价失效
				</view>
			</view>
			<view class="goods">
				<view class="goodstitle textsl2">
					{{item.goods.name}}
				</view>
				<view class="pricebox">
					<view class="price">
						<view class="price1">
							￥{{$toFiexd(item.price,2)}}
						</view>
						<view class="" style="color: #000;font-size: 14px;">
							还差
							<text style="color: #FE2406;font-weight: 700;">{{item.participate}}</text>
							人成团
						</view>
						<view class="price2" v-if="item.state==0&&item.take!=1">
							<uni-countdown :show-day="false" :hour="item.UpdatedAt[0]" :minute="item.UpdatedAt[1]" :second="item.UpdatedAt[2]" color="#FFFFFF" background-color="#000"/>剩余时间
						</view>
					</view>
					<view class="btns">
						{{['去拼团','去付款','','已过期'][item.state]}}
					</view>
				</view>
			</view>
		</view>
	</view>
	<empty v-if="data.list.length==0"></empty>
	</view>
</template>

<script setup>
	import {ref,reactive,getCurrentInstance} from "vue";
	import {onLoad,onShow,onPullDownRefresh,onReachBottom} from "@dcloudio/uni-app";
	const { appContext } = getCurrentInstance();
	const data = reactive({
		list:[],
		state:0,
		shopid:'',
		fenlid:''
	})
	let form = reactive({
		class_third_id:0,
		class_second_id:0,
		business_id:0
	})
	onLoad((option)=>{
		console.log(option.business_id);
		if(option.item){
			data.shopid = option.item
		}
		 if(option.business_id){
			data.fenlid = Number(option.business_id)
		}
		 if(option.class_second_id){
			data.fenlid = Number(option.class_second_id)
		}
		 if(option.class_third_id){
			data.fenlid = Number(option.class_third_id)
		}
		bargainingList()
	})
	onShow(()=>{
		
	})
	onPullDownRefresh(()=> {
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		})
	onReachBottom(()=>{
	})
	function egoURl(urls){
		uni.navigateTo({
			url:urls
		})
	}
	function tabsChange(e){
		data.state = e
		bargainingList()
	}
	function creat(item){
		appContext.config.globalProperties.$request({
			url: `api/bargaining/buyBargaining/`,
			method: 'POST',
			
			data:{
				id:Number(item.attribute_id),
				goods_id:Number(item.ID)
			},
			success(res) {
				
			}
		})
	}
	function bargainingList(){
		appContext.config.globalProperties.$request({
			url: `api/teamwork/joiningGroups/${data.fenlid}/?page=1&size=999&goods_id=${data.shopid}`,
			method: 'GET',
			success(res) {
				res.data.data.forEach(item=>{
					let time=new Date(appContext.config.globalProperties.$clearTime(item.CreatedAt))
					let times=new Date(time.setHours(time.getHours()+item.duration))
					let today=new Date()
					let difftime = (times - today)/1000;
					let days = parseInt(difftime/86400); // 天  24*60*60*1000 
					let hours = parseInt(difftime/3600);    // 小时 60*60 总小时数-过去的小时数=现在的小时数 
					let minutes = parseInt(difftime%3600/60); // 分钟 -(day*24) 以60秒为一整份 取余 剩下秒数 秒数/60 就是分钟数
					let seconds = parseInt(difftime%60);  // 以60秒为一整份 取余 剩下秒数	
					item.UpdatedAt=[hours,minutes,seconds]
				})
				data.list=res.data.data
			}
		})
	}
</script>

<style lang="scss">
	.container{
				.list{
		padding: 30upx;
					.item{
						background-color: #fff;
						padding: 15upx;
						border-radius: 15upx;
						display: flex;
						margin-bottom: 20upx;
						.image{
							border-radius: 15upx;
							margin-right: 20upx;
							position: relative;
							image{
								width: 90px;
								height: 90px;
								border-radius: 15upx;
							}
							.tlimg{
								position: absolute;
								left: 15px;
								top: 15px;
								width: 60px;
								height: 60px;
								z-index: 9999;
								background: rgba(0,0,0,0.4);
								border-radius: 50%;
								text-align: center;
								line-height: 60px;
								font-size: 12px;
								color: #fff;
							}
						}
						.goods{
							width: calc(100% - 90px - 20upx);
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							.goodstitle{
								font-size: 16px;
								font-weight: bold;
							}
							.pricebox{
								display: flex;
								justify-content: space-between;
								align-items: center;
								.price{
									.price1{
										color: #FE2406;
										font-size: 13px;
									}
									.price2{
										color: #999;
										font-size: 12px;
										display: flex;
										align-items: center;
									}
								}
								.btns{
									background: linear-gradient(to bottom,#FF521C,#FE2406);
									width: 30%;
									text-align: center;
									padding: 10upx 0;
									border-radius: 30upx;
									color: #fff;
									font-size: 13px;
								}
							}
						}
					}
				}
	}
</style>
